<template>
  <header class="order">
    <el-page-header :icon="Coin" style="margin-top: 10px" @click="toIndex">
      <template #content>
        <div class="flex items-center">
          <span class="text-large font-600 mr-3">学生信息管理</span>
        </div>
      </template>
    </el-page-header>
  </header>
  <nav style="margin-top: 20px;margin-left: 29px;">
    <el-button type="primary" plain :icon="Plus">添加</el-button>
    <el-button type="danger" plain :icon="Delete">批量删除</el-button>
    <input type="text" placeholder="请输入搜索内容"
           style="margin-left: 650px;height: 28px;" />
    <el-button type="success" plain>搜索</el-button>
  </nav>
<article style="margin-top: 40px;">
<!--  展示学生信息表格-->
  <el-table :data="paginatedData" stripe style="width: 100%">
    <el-table-column type="selection" width="30" v-model="isAll" />
    <el-table-column prop="id" label="编号" width="55" />
    <el-table-column prop="createdate" label="账号创建日期"  sortable width="140" />
    <el-table-column label="头像" width="70" >
      <template #default="scope">
        <el-image :src="scope.row.img" style="border-radius: 50%"></el-image>
      </template>
    </el-table-column>
    <el-table-column prop="sno" label="学号" width="70" />
    <el-table-column prop="username" label="姓名" width="100" />
    <el-table-column prop="college" label="学院" width="120" />
    <el-table-column prop="major" label="专业" width="100" />
    <el-table-column prop="grade" label="年级" width="60" />
    <el-table-column prop="telephone" label="电话" width="100" />
    <el-table-column prop="email" label="邮箱" width="100" />
    <el-table-column fixed="right" label="Operations" min-width="160">
      <template #default="scope">
        <el-button link type="primary" size="small">编辑</el-button>
        <el-button link type="warning" size="small" @click="delStuUserInfoById(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <footer style="margin-top: 40px">
    <!--分页-->
    <div class="demo-pagination-block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" :total="totalItems">
      </el-pagination>
    </div>
  </footer>
</article>

</template>
<script setup>
import {
  Coin, Delete, Plus, Search
} from '@element-plus/icons-vue'
import {onMounted, ref, reactive, computed} from "vue";
import axios from "axios";
import router from "@/router/index.js";

const tableData = ref([])

// 计算属性基本使用
const isAll = computed(() => {
  // 回调函数必须return，结果就是计算的结果
  // 如果计算属性依赖的数据发生变化，那么会重新计算
  return tableData.value.every(item => item.isChecked)
})

/**
 * 查询学生用户信息
 */
const queryStuUserInfos =()=>{
  fetch("http://localhost:3000//TbUserinfoController/getUserInfos/2").then(res =>res.json().then(res =>{
    tableData.value = res.data;
    currentPage.value = 1; // 重置页码
    // console.log(tableData.value);
  }))
}
/**
 * 删除学生用户信息
 */
const delStuUserInfoById =(id)=>{
  axios.delete(`api/TbUserinfoController/removeUserinfo/${id}`).then(res => {
    // console.log(res.data)
    queryStuUserInfos();
  })
}

/**
 * 分页
 * @type
 */
const currentPage = ref(1);
const pageSize = ref(6);
const totalItems = computed(() => tableData.value.length);
const paginatedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return tableData.value.slice(start, end);
});
const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
};

const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
};

const toIndex = () => {
  router.push({
    path: "/RootIndex",
  });
};

onMounted(()=>{
  queryStuUserInfos()
})
</script>
<style scoped>
.order{
  background-color: #F5F7FA;
  margin-top: -10px;
  height: 50px;
  padding-top: 20px;
  padding-left: 20px;
  border-radius: 5px;
}

</style>